import { LitElement, mathml as html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("mathml-example")
export class MathmlExample extends LitElement {
  protected override render() {
    return html`
      <math>
        <mtable>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <mrow>
                    <mrow>
                      <mi>a</mi>
                      <mo>⁢<!-- INVISIBLE TIMES --></mo>
                      <msup>
                        <mi>x</mi>
                        <mn>2</mn>
                      </msup>
                    </mrow>
                    <mo>+</mo>
                    <mi>b</mi>
                    <mo>⁢<!-- INVISIBLE TIMES --></mo>
                    <mi>x</mi>
                  </mrow>
                  <mo>+</mo>
                  <mi>c</mi>
                </mrow>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mn>0</mn>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <mi>a</mi>
                  <mo>⁢<!-- INVISIBLE TIMES --></mo>
                  <msup>
                    <mi>x</mi>
                    <mn>2</mn>
                  </msup>
                </mrow>
                <mo>+</mo>
                <mi>b</mi>
                <mo>⁢<!-- INVISIBLE TIMES --></mo>
                <mi>x</mi>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mo>−</mo>
              <mi>c</mi>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <msup>
                    <mi>x</mi>
                    <mn>2</mn>
                  </msup>
                </mrow>
                <mo>+</mo>
                <mfrac>
                  <mi>b</mi>
                  <mi>a</mi>
                </mfrac>
                <mo>⁤</mo>
                <mi>x</mi>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mfrac>
                <mrow>
                  <mo>−</mo>
                  <mi>c</mi>
                </mrow>
                <mi>a</mi>
              </mfrac>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;"
                  >两边同时除以二次项系数</mtext
                >
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <mrow>
                    <msup>
                      <mi>x</mi>
                      <mn>2</mn>
                    </msup>
                  </mrow>
                  <mo>+</mo>
                  <mfrac>
                    <mrow>
                      <mi>b</mi>
                    </mrow>
                    <mi>a</mi>
                  </mfrac>
                  <mo>⁤</mo>
                  <mi>x</mi>
                  <mo>+</mo>
                  <msup>
                    <mrow>
                      <mo>(</mo>
                      <mfrac>
                        <mrow>
                          <mi>b</mi>
                        </mrow>
                        <mrow>
                          <mn>2</mn>
                          <mi>a</mi>
                        </mrow>
                      </mfrac>
                      <mo>)</mo>
                    </mrow>
                    <mn>2</mn>
                  </msup>
                </mrow>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mrow>
                <mfrac>
                  <mrow>
                    <mo>−</mo>
                    <mi>c</mi>
                    <mo>(</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mo>)</mo>
                  </mrow>
                  <mrow>
                    <mi>a</mi>
                    <mo>(</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mo>)</mo>
                  </mrow>
                </mfrac>
                <mo>+</mo>
                <mfrac>
                  <mrow>
                    <msup>
                      <mi>b</mi>
                      <mn>2</mn>
                    </msup>
                  </mrow>
                  <mrow>
                    <mn>4</mn>
                    <msup>
                      <mi>a</mi>
                      <mn>2</mn>
                    </msup>
                  </mrow>
                </mfrac>
              </mrow>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;">完成配方</mtext>
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <mo>(</mo>
                  <mi>x</mi>
                  <mo>+</mo>
                  <mfrac>
                    <mrow>
                      <mi>b</mi>
                    </mrow>
                    <mrow>
                      <mn>2</mn>
                      <mi>a</mi>
                    </mrow>
                  </mfrac>
                  <mo>)</mo>
                  <mo>(</mo>
                  <mi>x</mi>
                  <mo>+</mo>
                  <mfrac>
                    <mrow>
                      <mi>b</mi>
                    </mrow>
                    <mrow>
                      <mn>2</mn>
                      <mi>a</mi>
                    </mrow>
                  </mfrac>
                  <mo>)</mo>
                </mrow>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mfrac>
                <mrow>
                  <msup>
                    <mi>b</mi>
                    <mn>2</mn>
                  </msup>
                  <mo>−</mo>
                  <mn>4</mn>
                  <mi>a</mi>
                  <mi>c</mi>
                </mrow>
                <mrow>
                  <mn>4</mn>
                  <msup>
                    <mi>a</mi>
                    <mn>2</mn>
                  </msup>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;">推导出判别式</mtext>
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <msup>
                    <mrow>
                      <mo>(</mo>
                      <mi>x</mi>
                      <mo>+</mo>
                      <mfrac>
                        <mrow>
                          <mi>b</mi>
                        </mrow>
                        <mrow>
                          <mn>2</mn>
                          <mi>a</mi>
                        </mrow>
                      </mfrac>
                      <mo>)</mo>
                    </mrow>
                    <mn>2</mn>
                  </msup>
                </mrow>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mfrac>
                <mrow>
                  <msup>
                    <mi>b</mi>
                    <mn>2</mn>
                  </msup>
                  <mo>−</mo>
                  <mn>4</mn>
                  <mi>a</mi>
                  <mi>c</mi>
                </mrow>
                <mrow>
                  <mn>4</mn>
                  <msup>
                    <mi>a</mi>
                    <mn>2</mn>
                  </msup>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;"></mtext>
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mrow>
                <mrow>
                  <mrow>
                    <mi>x</mi>
                    <mo>+</mo>
                    <mfrac>
                      <mrow>
                        <mi>b</mi>
                      </mrow>
                      <mrow>
                        <mn>2</mn>
                        <mi>a</mi>
                      </mrow>
                    </mfrac>
                  </mrow>
                </mrow>
              </mrow>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <msqrt>
                <mfrac>
                  <mrow>
                    <msup>
                      <mi>b</mi>
                      <mn>2</mn>
                    </msup>
                    <mo>−</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                  </mrow>
                  <mrow>
                    <mn>4</mn>
                    <msup>
                      <mi>a</mi>
                      <mn>2</mn>
                    </msup>
                  </mrow>
                </mfrac>
              </msqrt>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;"></mtext>
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mi>x</mi>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mfrac>
                <mrow>
                  <mo>−</mo>
                  <mi>b</mi>
                </mrow>
                <mrow>
                  <mn>2</mn>
                  <mi>a</mi>
                </mrow>
              </mfrac>
              <mo>±</mo>
              <mrow>
                <mo>{</mo>
                <mi>C</mi>
                <mo>}</mo>
              </mrow>
              <msqrt>
                <mfrac>
                  <mrow>
                    <msup>
                      <mi>b</mi>
                      <mn>2</mn>
                    </msup>
                    <mo>−</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                  </mrow>
                  <mrow>
                    <mn>4</mn>
                    <msup>
                      <mi>a</mi>
                      <mn>2</mn>
                    </msup>
                  </mrow>
                </mfrac>
              </msqrt>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;"
                  >这就是顶点公式</mtext
                >
              </mrow>
            </mtd>
          </mtr>
          <mtr>
            <mtd>
              <mi>x</mi>
            </mtd>
            <mtd>
              <mo>=</mo>
            </mtd>
            <mtd>
              <mfrac>
                <mrow>
                  <mo>-</mo>
                  <mi>b</mi>
                  <mo>±</mo>
                  <mrow>
                    <mo>{</mo>
                    <mi>C</mi>
                    <mo>}</mo>
                  </mrow>
                  <msqrt>
                    <msup>
                      <mi>b</mi>
                      <mn>2</mn>
                    </msup>
                    <mo>−</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                  </msqrt>
                </mrow>
                <mrow>
                  <mn>2</mn>
                  <mi>a</mi>
                </mrow>
              </mfrac>
            </mtd>
            <mtd>
              <mrow>
                <mtext style="color: red; font-size: 10pt;"></mtext>
              </mrow>
            </mtd>
          </mtr>
        </mtable>
      </math>
    `;
  }
}
